<template>
 <div style="padding-top: 1px;min-height:300px;">
    <div class="item" v-for="item in courseList" :key="item.id">
      <div class="courseName">{{item.courseId}}</div>
      <div class="time">
        <div class="startTime" style="margin-right: 50px;">上课时间：{{item.courseStartime}} </div>
        <div class="endTime" style="width:400px">下课时间：{{item.counrseEndtime}} <span style="margin-left: 100px;">课时：{{item.xknumber}}</span></div>
      </div>
      
      <div class="evaluate">
        <div class="startTime" style="margin-right: 50px;">教&#8195;&#8195;&#8195;&#8195;师：{{item.teacherId}}</div>
        <div class="startTime" >销课时间：{{item.createTime}}
        <span style="margin-left: 100px;"> <el-button style="width:100px" @click="review(item)" type="primary">查看评价</el-button></span>
        </div>
      </div>
    


<!--    
      <div class="enclosure">
        <div class="startTime enclosure1">附件：
          <el-image
            v-for="(ele, index) in item.enclosure1"
            :key="index"
            class="img"
            :src="ele" 
            :preview-src-list="item.enclosure1">
          </el-image>
        </div> -->
        
      </div>
      <el-dialog title="评价详情" :visible.sync="open"  width="800px" append-to-body>
          <el-form ref="form" :model="form"  label-width="100px">
                  <el-form-item label="评价" prop="evaluate">
                      <el-input type="textarea" :disabled="true" v-model="form.evaluate"  placeholder="请输入评价" />
                  </el-form-item>
                  <el-form-item label="附件" >
                      <imageUpload v-model="form.enclosure" :limit="3"/>
                      <!-- <imageUpload v-model="form.enclosure2" :limit="1"/> -->
                  </el-form-item>
                  <!-- <el-form-item label="消课次数"  prop="xknumber" v-if="xkStatus">
                      <el-input  v-model="form.xknumber" type="number"  placeholder="请输入消课次数" />
                  </el-form-item> -->
                </el-form> 
        </el-dialog>
    </div>
  </div>
</template>


<script>
import { getCourseRecords } from "@/api/school/student";
import { getStudentEvaluate } from "@/api/school/marketing";
export default {
  data() {
    return {
      courseList: [],
      open: false,
      form:{},
    }
  },
  methods: {
    getData() {
      this.getCourseRecords()
    },
    // 获取上课记录
    getCourseRecords() {
      getCourseRecords(this.$route.query.id).then(res => {
        console.log(res, '上课记录')
        this.courseList = res.rows.map(item => {
          return item
        })
        console.log(this.courseList, 'this.courseList ')
      })
    },
    //点击评价
    review(item){
        this.open=true;
        //查询评价信息
        getStudentEvaluate(item.id).then(res => {
          console.log(res.data);
          this.form=res.data;
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .item {
    box-shadow: 0px 2px 8px 0px rgba(150, 150, 150, 0.2);
    margin: 0px 3px 20px;
    padding: 20px;
    box-sizing: border-box;
    color: #737373;
    .courseName {
      font-size: 16px;
      color: #333;
      font-weight: 600;
    }
    .time {
      display: flex;
      align-items: center;
      margin: 20px 0px;
      >div {
        width: 350px;
      }
    }
    .date {
      display: flex;
      align-items: center;
      >div {
        width: 350px;
      }
    }
    .number {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      >div {
        width: 350px;
      }
    }
    .evaluate {
      display: flex;
      :first-child {
        width: 350px;
      }
      :last-child {
        width: calc(100% - 400px);
      }
    }
    .enclosure {
      div {
        margin-top: 20px;
      }
      .download {
        color: rgb(64, 158, 255);
        margin-left: 15px;
        cursor: pointer;
      }
    }
    .enclosure1 {
      display: flex;
      align-items: flex-start;
      .img {
        width: 100px;
        height: 100px;
        margin-top: 0px;
        margin-bottom: 20px;
        margin-right: 20px;
      }
    }
  }
</style>
